<template>
  <div class="app-container home"  v-loading="loading">
    <el-form ref="queryFormRef" :inline="true">
      <el-form-item>
        <el-button icon="SwitchButton" type="primary" @click="setPowerOnOffApp">设置全部设备开关机时间</el-button>
        <el-button icon="Refresh" type="danger" @click="setShutdownApp">一键关机</el-button>
        <el-button icon="WarningFilled" type="warning" @click="setRebootApp">一键重启</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-between;" v-if="deviceList.length > 0">
      <div v-for="(item, index) in deviceList" :key="index" style="margin-top: 20px;">
        <img :src="item.deviceImage ? item.deviceImage : require('../assets/images/pb.jpg')"
          style="width: 400px;height: 250px;">
        <div style="margin-top: 10px;font-size: 16px;">
          <div>IP：{{ item.deviceIp }}</div>
          <div style="margin-top: 5px;">MAC：{{ item.deviceMac }}</div>
          <div style="margin-top: 5px;">通讯方式：{{ item.deviceCommunication }}</div>
          <div style="margin-top: 5px;">设备状态：
            <el-tag class="ml-2" type="danger" v-if="item.deviceStatus == '0'">离线</el-tag>
            <el-tag class="ml-2" type="success" v-if="item.deviceStatus == '1'">正常</el-tag>
            <el-tag class="ml-2" type="warning" v-if="item.deviceStatus == '2'">停用</el-tag>
          </div>
          <div style="margin-top: 5px;display: flex;align-items: center;">
            <div>操作：</div>
            <div style="margin-top: 3px;"><el-button type="text" @click="getTakeScreenshot(item, '0')">刷新界面</el-button>
            </div>
            <div style="margin-top: 3px;margin-left: 10px;"><el-button type="text"
                @click="setTimeOffOn(item, '0')">设置时间</el-button></div>
            <div style="margin-top: 3px;margin-left: 10px;"><el-button type="text"
                @click="setDevice(item)">设置节目</el-button>
            </div>
            <div style="margin-top: 3px;margin-left: 10px;"><el-button type="text"
                @click="setShutdownApp(item, '0')">关机</el-button>
            </div>
            <div style="margin-top: 3px;margin-left: 10px;"><el-button type="text"
                @click="setRebootApp(item, '0')">重启</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-empty v-if="deviceList.length == 0" description="暂无设备">
      <el-button type="primary" @click="addDevice">去添加设备</el-button>
    </el-empty>
    <el-divider />

    <el-dialog title="下发节目" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="选择节目" :label-width="formLabelWidth">
          <el-select v-model="form.infoId" clearable filterable placeholder="请选择节目">
            <el-option v-for="(item, index) in infoList" :key="index" :label="item.programName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setIssued">确 定</el-button>
      </div>
    </el-dialog>


    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="每天定时开关机" name="first">
          <div style="padding: 20px;display: flex;align-items: center;height: 100%;">
            <el-form ref="form" :model="formTime" label-width="120px">
              <div v-for="(item, index) in formTime.timeMuch" :key="index" style="margin-top: 20px;">
                <el-form-item label="定时开机时间">
                  <el-time-picker v-model="item.startTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy,MM,dd,HH,mm" placeholder="选择日期时间">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="定时关机时间">
                  <el-time-picker v-model="item.endTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy,MM,dd,HH,mm" placeholder="选择日期时间">
                  </el-time-picker>
                </el-form-item>

                <el-divider></el-divider>
              </div>
              <el-form-item>
                <el-button type="primary" @click="setPowerOnOffAppsub">立即下发</el-button>
                <el-button @click="addNewTime">新增一组</el-button>
                <el-button @click="drawer = false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="一周定时开关机" name="second">
          <div style="padding: 20px;">
            <el-form ref="form" :model="formCycle" label-width="120px">
              <el-form-item label="开启周期">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                  @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="formCycle.cycle" @change="handleCheckedCitiesChange" size="mini">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="定时开机时间">
                <el-time-picker v-model="formCycle.startTime" format="HH:mm:ss" value-format="HH,mm"
                  placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item>
              <el-form-item label="定时关机时间">
                <el-time-picker v-model="formCycle.endTime" format="HH:mm:ss" value-format="HH,mm" placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item>


              <el-form-item>
                <el-button type="primary" @click="setPowerOnOffAppWeek">立即下发</el-button>
                <el-button @click="drawer = false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
const cityOptions = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
import { list, programList, programIssued, shutdownApp, rebootApp, setPowerOnOffAppTime, getTakeScreenshotAppPic, setPowerOnOffAppWeekNew } from '@/api/information/index';
export default {
  name: '',
  data() {
    return {
      activeName: "first",
      dialogFormVisible: false,
      drawer: false,
      loading: false,
      deviceList: [],
      device: {},
      type: "0",
      infoList: [],
      deviceDetail: {},
      formTime: {
        timeMuch: [{
          startTime: "",
          endTime: ""
        }]
      },
      formCycle: {
        cycle: [],
        startTime: "",
        endTime: ""
      },
      formLabelWidth: "120px",
      form: {
        infoId: ""
      },
      queryParamsDevice: {
        pageNum: 1,
        pageSize: 999
      },
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true
    }
  },
  watch: {
    drawer() {
      this.formTime.timeMuch = []
      this.formTime.timeMuch.push({
        startTime: "",
        endTime: ""
      })
    }
  },
  mounted() {
    this.getDevice()
  },
  methods: {
    addDevice() {
      this.$router.push({ path: "/Information/iotDevice" })
    },
    /**
     * 获取设备列表
     */
    getDevice() {
      list(this.queryParamsDevice).then((res) => {
        this.deviceList = res.rows
        this.loading = false
      });
    },
    handleClick() { },
    addNewTime() {
      this.formTime.timeMuch.push({
        startTime: "",
        endTime: ""
      })
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    /**
     * 关机
     */
    setShutdownApp(item, type) {
      this.$confirm('此操作将关闭全部机器, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        shutdownApp({
          mac: item.deviceMac,
          type: type ? type : "1"
        }).then((res) => {
          this.$message({
            message: '已下发关机',
            type: 'success'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消关机'
        });
      });
    },
    /**
     * 重启
     */
    setRebootApp(item, type) {
      this.$confirm('此操作将重启全部设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rebootApp({
          mac: item.deviceMac,
          type: type ? type : "1"
        }).then((res) => {
          this.$message({
            message: '已下发重启',
            type: 'success'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重启'
        });
      });
    },
    /**
     * 设置开关机时间
     */
    setPowerOnOffApp() {
      this.drawer = true
    },
    setPowerOnOffAppWeek() {
      const result = cityOptions.map(day => this.formCycle.cycle.includes(day) ? 1 : 0).join(',');
      // this.formCycle.cycle = result
      let data = Object.assign({}, this.formCycle)
      data.cycle = result
      setPowerOnOffAppWeekNew({
        mac: this.device.deviceMac,
        type: this.type ? this.type : "1",
        TimeInterval: JSON.stringify(data)
      }).then((res) => {
        this.$message({
          message: '已下发定时开关机',
          type: 'success'
        });
        this.drawer = false
        this.formCycle = {
          cycle: [],
          startTime: "",
          endTime: ""
        }
      });
    },
    setPowerOnOffAppsub() {
      setPowerOnOffAppTime({
        mac: this.device.deviceMac,
        type: this.type ? this.type : "1",
        TimeInterval: JSON.stringify(this.formTime.timeMuch)
      }).then((res) => {
        this.$message({
          message: '已下发定时开关机',
          type: 'success'
        });
        this.drawer = false
      });
    },
    setTimeOffOn(item, type) {
      this.drawer = true
      this.device = item
      this.type = type
    },
    /**
     * 获取截图
     */
    getTakeScreenshot(val) {
      this.loading = true
      getTakeScreenshotAppPic({
        mac: val.deviceMac,
        type: "0"
      }).then((res) => {
        let that = this
        setTimeout(() => {
          that.getDevice()
        }, 5000);
      });
    },
    onSubmit() {
      console.log(this.formTime)
    },
    getInfo() {
      programList(this.queryParamsDevice).then((res) => {
        this.infoList = res.rows;
      });
    },
    setDevice(row) {
      this.getInfo()
      this.dialogFormVisible = true
      this.deviceDetail = row
    },
    setIssued() {
      let deviceList = []
      deviceList.push(this.deviceDetail.deviceMac)
      programIssued({
        id: this.form.infoId,
        macList: deviceList,
        type: '2'
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '下发成功!'
          });
        }
        this.form = {
          infoId: ""
        }
        this.dialogFormVisible = false
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  overflow: scroll;
  height: 90vh;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans',
  'Helvetica Neue',
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
